<template>
    <div class="out">
        <div>
            <div class="ft-red">
                <h5>简介：</h5>
                <p> 响应式 : ref , reactive ; 等待 DOM 更新完成后再执行额外的代码 nextTick </p>
                <p>ref: 声明响应式状态的主要 API, 通常声明：字符串，数子，布尔值; reactive: 有一些局限性, 1.只能用于对象类型 ! 2.不能替换整个对象! 3.对解构操作不友好!</p>
            </div>
            <div>
                <el-button type="danger" @click="addRef1"> Ref +1 </el-button>
                <el-button type="warning" @click="addReactive1"> Reactive +1 </el-button>
                <el-button type="warning" @click="addRefObj1"> RefObj1 +1 </el-button>
                <p>show count1: {{ addAfter = message + 1 }}</p>
                <p>show count2: {{ messObj.cont }}</p>
            </div>
        </div>
        <span class="line"></span>
        <div>
            <div class="ft-red">
                <h5>简介：</h5>
                <p> computed() 方法期望接收一个 getter 函数，返回值为一个计算属性 ref 对象。描述依赖响应式状态的复杂逻辑. </p>
                <p> 1.动态 class 样式中判断条件比较复杂时； 2.模版语法中用到比较复杂的判断条件时 </p>
                <p> 当一个标签上绑定两个及以上 class 名称时 --- 用数组形式 ：class="[ 'classname' , classbianliang ]" </p>
                <el-button type="danger" @click="classChange">点击4次,计算属性修改class</el-button>
                <p :class="[comClass, 'ft-se']">{{ showrt }}</p>
            </div>
        </div>
        <span class="line"></span>
        <div class="ft-red">
            <p>简介:</p>
            <p>声明数组对象时，用ref( [{},{}] ) ; v-for: '分隔符'--- in / of ; '遍历' --- 对象 / 数组</p>
            <p>大部分数组的方法 都会改变原数组；但filter()，concat() 和 slice()这些都不会更改原数组，而总是返回一个新数组。</p>
        </div>
        <span class="line"></span>
        <div class="ft-red">
            <p>简介:</p>
            <p>Vue3中的生命周期: onBeforeMount , onMounted , onBeforeUpdate , onUpdated , onBoforeUnmount , onUnmounted ,
                onActivated , onDeactivated</p>
            <p>使用之前都是要从 vue 中导出来， import { onMounted } from 'vue'</p>
        </div>
        <span class="line"></span>
        <div class="ft-red">
            <p>简介:</p>
            <p>watch / watchEffect 函数: </p>
            <p>watch: 监听单个 ref ; 监听两个ref之和; 同时监多个数据; 监听对象中属性.</p>
            <el-button type="danger" @click="wtClick1">监听单个 ref,监听两个ref之和</el-button>
            <el-button type="danger" @click="wtClick3">同时监多个数据</el-button>
            <el-button type="danger" @click="wtClick4">监听对象中属性</el-button>
            <p>x: {{ x }} , y: {{ y }}</p>
            <p>watchEffect:( 推荐使用:直接在回调函数中使用被监听变量就行，其他不用管 ) ;
                特点：回调会立即执行; 不需要明确 todoId 作为源值,但回调中必须用到了 todoId; 可以同时监听多个依赖项; 比深度侦听器更有效. </p>
            <el-button type="danger" @click="wtClick5">要先改变 x 的值，watchEffect监听</el-button>
        </div>
        <span class="line"></span>
        <div class="ft-red">
            <p>简介:</p>
            <p>ref 函数: 1. 用在普通标签上、封装的组件上，可以直接打点调用它的方法和属性; 2. 子组件script标签使用了 'setup' 属性,
                它的方法和属性就默认私有了，必须通过defineExpose（需要导入） 宏显式暴露，父组件才能用 ref 访问。</p>
            <el-button type="danger" @click="childHandel">触发子组件中的方法</el-button>
            <Children ref="child"></Children>
        </div>
        <span class="line"></span>
        <div class="ft-red">
            <p>简介:</p>
            <p>组件基础: props(父组件改变子组件中的视图)--defineProps返回普通对象 , $emit(子组件改变父组件中的视图)--defineEmits返回方法 , component 动态组件(tab 切换，展示不同的组件) 写法与 V2 很不同</p>
            <p>KeepAlive : 保持组件活性，切换时不会被重置数据.</p>
            <div :style="{ 'font-size': size + 'em' }">
                <ChildrenB :title="weboTitle" @bigFont="size++"></ChildrenB>
            </div>
            <table>
                <tr>
                    <td @click="toggleTab(item)"
                        style="padding: 10px; border-right: 1px solid red; cursor: pointer;text-align: center;"
                        v-for="(item, dx) in btns" :key="dx">
                        {{ item }}
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                        <KeepAlive>
                            <component :is="pont[current]"></component>
                        </KeepAlive>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
// 组价导入
import Children from './ChildrenA.vue'
import ChildrenB from './ChildrenB.vue'
import Home from './动态组件/HomeP.vue'
import About from './动态组件/AboutP.vue'
import News from './动态组件/NewsP.vue'

// js逻辑代码模块导入
import { wtClick1, wtClick3, wtClick4, wtClick5, x, y } from './js/watch_watchEffect.js'   // 监听
import { showrt, comClass, classChange } from './js/computed.js'   // 计算属性
import { addRef1, addReactive1, addRefObj1, addAfter, messObj, message } from './js/变量声明ref_reactive_nextTick.js'   // 变量声明
import { child, childHandel } from './js/ref.js'   // 模板引用 

// 组件基础
const weboTitle = ref('今时不同往日')
const size = ref(1)
const btns = ref(['Home', 'About', 'News'])
const pont = ref({ Home, About, News })
const current = ref('Home')
function toggleTab(item) {
    current.value = item
}
</script>

<!-- 不是sass , 而是scss -->
<style lang='scss' scoped>
@import '../../xunlian/common/css/comcss';   // 切记：不能加 .scss ，否则无法直接定位到该文件中
</style>